<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search"
            style="margin-bottom: 20px" />
        </div>
        <div class="head-containerTree">
          <el-tree :data="deptOptionsAll" :props="defaultPropsDept" :expand-on-click-node="false"
            :filter-node-method="filterNode" ref="tree" default-expand-all @node-click="handleNodeClick" />
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24">
        <el-form :inline="true">
          <el-form-item label="部门名称">
            <el-input v-model="queryParams.deptName" placeholder="请输入部门名称" clearable size="small"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="queryParams.status" placeholder="部门状态" clearable size="small">
              <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel"
                :value="dict.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="filter-item" type="primary" icon="el-icon-search" size="mini"
              @click="handleQuery">搜索</el-button>
            <el-button class="filter-item" type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
              v-hasPermi="['system:dept:add']">新增</el-button>
          </el-form-item>
        </el-form>
        <el-row style="margin-bottom: 20px;">
          <el-col :span="24" >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              :disabled="!ids.length"
              @click="handleBatchDelete"
              v-hasPermi="['system:dept:remove']"
            >删除</el-button>
            <el-button
              type="primary"
              icon="el-icon-refresh"
              size="mini"
              :loading="syncLoading"
              :disabled="single || !ids.length || syncLoading"
              @click="handleSync"
            >{{ syncLoading ? '同步中...' : '同步企微组织和人员' }}</el-button>
          </el-col>
        </el-row>

        <el-table v-loading="loading" :data="deptList" row-key="deptId" @selection-change="handleSelectionChange"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
          <!-- <el-table-column label="部门图片" v-if="handleCheckPermi('system:dept:logo') || handleCheckRole('admin')"
            align="center" prop="logo">
            <template slot-scope="scope">
              <el-image :src="base_url + scope.row.logo" style="height: 40px;width: 40px" />
            </template>
</el-table-column> -->
          <el-table-column prop="userNum" label="用户数" width="200" align="center"></el-table-column>
          <el-table-column prop="orderNum" label="排序" width="200" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" :formatter="statusFormat" width="100"
            align="center"></el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="200">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="deptType" label="部门类型" width="100" align="center" min-width="100">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.deptType == '0'" type="success">部门</el-tag>
              <el-tag v-if="scope.row.deptType == '1'" type="warning">客户</el-tag>
              <el-tag v-if="scope.row.deptType == '2'" type="primary">主代工体</el-tag>
              <el-tag v-if="scope.row.deptType == '3'" type="primary">企微同步</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="微信客户端" v-if="handleCheckPermi('system:dept:wxClien') || handleCheckRole('admin')" min-width="140">
            <template slot-scope="scope">
              <el-tag style="margin-right: 10px" v-for="(item, index) in scope.row.clientVos" :key="index">{{ item.name
                }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width"
            min-width="300">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateWxOpen(scope.row)"
                v-hasPermi="['system:dept:client']">配置客户端</el-button>

              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                v-hasPermi="['system:dept:edit']">修改</el-button>
              <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)"
                v-hasPermi="['system:dept:add']">新增</el-button>
              <el-button v-if="scope.row.parentId != 0" size="mini" type="text" icon="el-icon-delete"
                @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']">删除</el-button>

            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>


    <!-- 添加或修改部门对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                  <el-row :gutter="20">
            <el-col :span="24" v-if="!isRoot">
              <el-form-item label="上级部门" prop="parentId">
                <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer"
                  placeholder="选择上级部门" />
              </el-form-item>
            </el-col>
          </el-row>

        <el-row :gutter="20">
                      <el-col :span="12">
              <el-form-item :label="!isRoot ? '部门名称' : '企业名称'" prop="deptName">
                <el-input v-model="form.deptName" :placeholder="!isRoot ? '请输入部门名称' : '请输入企业名称'" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="显示排序" prop="orderNum">
                <el-input-number v-model="form.orderNum" controls-position="right" :min="0" style="width: 100%" />
              </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="负责人" prop="leader">
              <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门状态">
              <el-radio-group v-model="form.status">
                <el-radio label="0">正常</el-radio>
                <el-radio label="1">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="部门类型" prop="deptType">
              <el-select v-model="form.deptType" placeholder="请选择部门类型" style="width: 100%">
                <!-- <el-option label="请选择部门类型" value="" disabled></el-option> -->
                <el-option v-for="item in deptTypeOptions" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业微信" prop="qyClientId">
              <el-select v-model="form.qyClientId" placeholder="请选择企业微信客户端" style="width: 100%">
                <el-option v-for="item in qyntListList" :key="item.id" :label="item.qyName"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="isSubmitting">{{ isSubmitting ? '提交中...' : '确 定' }}</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 配置菜单 -->
    <el-dialog :title="menuTitle" :visible.sync="menuOpen" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-form-item label="菜单权限">
          <el-tree :data="menuOptions" show-checkbox ref="menu" node-key="id" empty-text="加载中，请稍后"
            :props="defaultProps"></el-tree>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitMenuForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="配置微信客户端" :visible.sync="wxOpen" width="500px" append-to-body>
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="item in listClient" :key="item.id" :label="item.id" :value="item.id">{{ item.name
          }}</el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitWxForm">确 定</el-button>
        <el-button @click="wxCancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  listDept, getDept, delDept, addDept, updateDept,
  listDeptExcludeChild, saveConfigMenu, getDeptMenuIds, getClientList, saveClient, qyClientList
  , treeselect as deptTreeselect,syncQyClient
} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import store from '@/store';
import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
import { listClient } from "@/api/wx/client";
import { getToken } from "@/utils/auth";
import { checkPermi, checkRole } from "@/utils/permission.js";

export default {
  name: "Dept",
  components: { Treeselect },
  data() {
    return {
      deptTypeOptions: [
        {
          label: '部门',
          value: '0'
        },
        {
          label: '客户',
          value: '1'
        },
        {
          label: '主代工体',
          value: '2'
        },
        {
          label: '企微同步',
          value: '3'
        }
      ],
      // 遮罩层
      loading: true,
      // 部门名称
      deptName: undefined,
      // 表格树数据
      deptList: [],
      // 部门树选项
      deptOptions: [],
      deptOptionsAll: [],
      qyntListList: [],//企业微信列表
      // 弹出层标题
      title: "",
      menuTitle: "配置菜单",
      // 是否显示弹出层
      open: false,
      menuOpen: false,
      // 状态数据字典
      statusOptions: [],
      // 菜单列表
      menuOptions: [],
      // 查询参数
      queryParams: {
        deptName: undefined,
        status: undefined
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        // parentId: [
        //   { required: true, message: "上级部门不能为空", trigger: "blur" }
        // ],
        deptName: [
          { required: true, message: "部门名称不能为空", trigger: "blur" }
        ],
        orderNum: [
          { required: true, message: "菜单顺序不能为空", trigger: "blur" }
        ],
        orderNum: [
          { required: true, message: "菜单顺序不能为空", trigger: "blur" }
        ],
        email: [
          {
            type: "email",
            message: "'请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phone: [
          {
            // pattern: /^((1[3|4|5|6|7|8|9][0-9]\d{8})|((\d{4}-)?\d{6,8}))$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
      },
      base_url: process.env.VUE_APP_BASE_API,
      //文件列
      fileList: [],
      // 设置上传的请求头部
      headers: { Authorization: "Bearer " + getToken() },
      //上传地址
      url: process.env.VUE_APP_BASE_API + "/common/upload",
      //是否禁用上传
      flag: false,
      //图片路径
      files: { path: '' },
      isAdmin: false  //超级管理员
      , defaultProps: {
        children: "children",
        label: "label"
      },
      defaultPropsDept: {
        children: "children",
        label: "label"
      },
      checkList: [],
      wxOpen: false,
      listClient: [],
      deptId: undefined,
      isRoot: true, //是否是顶级部门
      // 选中数组
      ids: [],
      // 是否只选中一个
      single: true,
      // 同步按钮加载状态
      syncLoading: false,
      // 提交节流标志
      isSubmitting: false,
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    //获取用户角色
    const roles = store.getters && store.getters.roles;
    var isAdmin = false;
    for (var i = 0; i < roles.length; i++) {
      if (roles[i] == 'admin') {
        isAdmin = true;
        break;
      }
    }
    //不是超级管理员，限制
    if (!isAdmin) {
      var r = this.rules;
      r['parentId'] = [
        { required: true, message: "上级部门不能为空", trigger: "blur" }
      ];
      this.rules = r;
    }

    this.isAdmin = isAdmin;
    this.getTreeselect(); //获取部门树
    this.getList();
    this.getDicts("sys_normal_disable").then(response => {
      this.statusOptions = response.data;
    });
    this.getMenuTreeselect();
    if (this.handleCheckRole('admin')) {
      listClient().then(res => {
        console.log(res)
        this.listClient = res.rows;
      });
    }
  },
  methods: {
    /** 查询部门下拉树结构 */
    getTreeselect() {
      deptTreeselect().then(response => {
        this.deptOptionsAll = response.data;
      });
    },


    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.getList();
    },
    /** 查询部门列表 */
    getList() {
      this.loading = true;
      listDept(this.queryParams).then(response => {
        if (response.data.length > 0) {
          this.deptList = this.handleTree(response.data, "deptId", null, null, response.data[0].parentId);
        }
        this.loading = false;
      });
    },
    handleCheckPermi(v) {
      return checkPermi([v]);
    },
    handleCheckRole(v) {
      return checkRole([v]);
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id || node.deptId,
        label: node.label || node.deptName,
        children: node.children
      };
    },
    // 字典状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.menuOpen = false;
      this.reset();

    },
    // 表单重置
    reset() {
      if (this.$refs.menu != undefined) {
        this.$refs.menu.setCheckedKeys([]);
      }

      this.form = {
        deptId: undefined,
        parentId: undefined,        // 上级部门ID
        deptName: undefined,        // 部门名称
        orderNum: 0,               // 显示排序
        leader: undefined,         // 负责人
        phone: undefined,          // 联系电话
        email: undefined,          // 邮箱
        status: "0",              // 部门状态
        deptType: undefined,      // 部门类型
        qyClientId: undefined,      // 企业微信
      };
      this.resetForm("form");
      this.fileList = [];
      this.flag = false
      this.files = { path: '' };
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.deptId = undefined; //删除左边点击部门指定id
      this.getList();
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.reset();
      if (row != undefined) {
        this.form.parentId = row.deptId;
      }
      this.open = true;
      this.title = "添加部门";
      this.isRoot = false; // 新增时总是显示上级部门选择框

      //获取企业微信列表
      this.getQyClientList();
      deptTreeselect().then(response => {
        this.deptOptions = response.data;
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      let that = this
      getDept(row.deptId).then(response => {
        this.form = response.data;
        this.files = { path: this.form.logo };
        this.open = true;


        // 获取部门树数据并重构
        deptTreeselect().then(treeResponse => {
          console.log('treeResponseata', treeResponse.data)

          let dataTree = treeResponse.data
          //如果当前修改的部门是最顶级部门，展示为修改企业，并且隐藏排序
          console.log('dataTree', dataTree[0].id, row.deptId)
          if (dataTree[0].id == row.deptId) {  //如果当前修改的部门是最顶级部门，展示为修改企业，并且隐藏排序
            this.isRoot = true
            this.title = "修改企业";
          } else {
            this.isRoot = false
            this.title = "修改部门";
          }
          // 递归检查节点是否存在于树中
          const findNodeInTree = (nodes, targetId) => {
            if (!nodes) return false
            return nodes.some(node => {
              if (node.id === targetId) {
                return true
              }
              if (node.children && node.children.length) {
                return findNodeInTree(node.children, targetId)
              }
              return false
            })
          }

          const isRootDuplicate = findNodeInTree(treeResponse.data, that.form.parentId)

          if (isRootDuplicate) {
            // 如果根节点已存在于树中，直接使用原数据
            that.deptOptions = treeResponse.data
          } else {
            // 构建根节点（当前部门的父级）
            const rootNode = {
              id: that.form.parentId,
              label: that.form.parentName,
              children: treeResponse.data || [],
              deptId: that.form.deptId
            }

            // 过滤掉当前部门及其子部门，避免循环选择
            const filterCurrentDept = (nodes) => {
              return nodes.filter(node => {
                if (node.id === row.id) {
                  return false
                }
                if (node.children && node.children.length) {
                  node.children = filterCurrentDept(node.children)
                }
                return true
              })
            }

            rootNode.children = filterCurrentDept(rootNode.children)
            that.deptOptions = [rootNode]
          }

          console.log('部门树', that.deptOptions)
        }).catch(error => {
          console.error('获取部门树失败:', error)
          this.$message.error('获取部门树失败')
        })



      });
      listDeptExcludeChild(row.deptId).then(response => {
        this.deptOptions = this.handleTree(response.data, "deptId");
      });
      //获取企业微信列表
      this.getQyClientList();


    },
    //获取企业微信列表
    getQyClientList() {
      qyClientList({
        status: '0'
      }).then(res => {
        console.log('qyntListList', res);
        this.qyntListList = res.rows;
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      if (this.isSubmitting) {
        return;
      }
      this.isSubmitting = true;
      
      console.log('当前提交参数', this.form);
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.deptId != undefined) {
            console.log('当前提交参数', this.form);

            updateDept(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }
            }).finally(() => {
              this.isSubmitting = false;
            });
          } else {
            addDept(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }
            }).finally(() => {
              this.isSubmitting = false;
            });
          }
        } else {
          this.isSubmitting = false;
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('是否确认删除名称为"' + row.deptName + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delDept(row.deptId);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(function () { });
    },
    /** 配置菜单 */
    handleConfigMenu(row) {
      this.reset();

      if (row != undefined) {
        this.form.deptId = row.deptId;
      }

      //获取部门的菜单
      getDeptMenuIds(this.form.deptId).then(res => {
        this.$refs.menu.setCheckedKeys(res.data);
      })

      this.menuOpen = true;
    },
    /** 查询菜单树结构 */
    getMenuTreeselect() {
      menuTreeselect().then(response => {
        this.menuOptions = response.data;
      });
    },
    // 所有菜单节点数据
    getMenuAllCheckedKeys() {
      // 目前被选中的菜单节点
      let checkedKeys = this.$refs.menu.getHalfCheckedKeys();
      // 半选中的菜单节点
      let halfCheckedKeys = this.$refs.menu.getCheckedKeys();
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
      return checkedKeys;
    },
    submitMenuForm() {
      var menuIds = this.getMenuAllCheckedKeys();

      saveConfigMenu({ 'deptId': this.form.deptId, 'menuIds': menuIds }).then(response => {
        console.log(response);
        if (response.code == 200) {
          this.msgSuccess("配置成功");
          this.menuOpen = false;
        }
      });
    },

    submitWxForm() {
      console.log(this.checkList)
      if (this.deptId) {
        saveClient({
          deptId: this.deptId,
          clientIds: this.checkList
        }).then(res => {
          if (res.code == 200) {
            this.msgSuccess("配置成功");
            this.wxCancel()
          }
        })
      }
    },
    handleUpdateWxOpen(row) {
      this.checkList = [];
      this.deptId = row.deptId;
      getClientList(row.deptId).then(res => {
        console.log(res)
        console.log('checkList', res);
        var ids = [];
        res.data.filter(e => {
          ids.push(e.qyClientIdId);
        });
        this.checkList = ids;

        console.log('checkList', this.checkList);

      });
      this.wxOpen = true;
    },
    wxCancel() {
      this.wxOpen = false;
    },
    /**关闭dialog的按钮触发*/
    closeDialog() {
      if (this.files.path != undefined && this.files.path != '') {
        console.log("关闭dialog触发删除")
        delFile(this.files).then(response => {
          this.files.path = undefined;
          console.log(response)
        })
      }
    },
    /** 上传之前的校验 */
    checkUpload(file) {
      console.log("文件类型", file)
      const imgType = file.type
      //图片不大于2M
      const isLtSize = file.size / 1024 / 1024 < 2
      if (['image/png', 'image/jpeg', 'image/jpg', 'image/gif'].indexOf(imgType) === -1) {
        this.$message.error('上传图片只能是 JPG、PNG、GIF格式!')
        return false;
      }
      if (!isLtSize) {
        this.$message.error(`上传图片大小不能超过2MB!`)
        return false;
      }
    },
    /** 上传成功后的回调 */
    uploadSuccess(response, file, fileList) {
      console.log("1111");
      this.form.logo = response.fileName
      this.files.path = response.fileName
      this.flag = true
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.deptId);
      this.single = selection.length !== 1;
    },
    
    /** 批量删除按钮操作 */
    handleBatchDelete() {
      const deptIds = this.ids;
      if (deptIds.length === 0) {
        this.$modal.msgError("请选择需要删除的数据");
        return;
      }
      this.$confirm('是否确认删除选中的' + deptIds.length + '条数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return delDept(deptIds.join(','));
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(() => {});
    },

    /** 同步按钮操作 */
    handleSync() {
      if (this.ids.length !== 1) {
        this.$modal.msgError("请选择一个部门进行同步");
        return;
      }
      
      // 如果正在同步中，则不允许重复操作
      if (this.syncLoading) {
        return;
      }

      this.$confirm('是否确认同步该部门的企微组织和人员?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.syncLoading = true;
        console.log('同步部门', this.ids[0]);
        return syncQyClient(this.ids[0]);
      }).then(response => {
        if (response.code === 200) {
          this.msgSuccess(response.msg);
          this.getList();
          this.syncLoading = false;
        }
      }).catch(() => {
       
      }).finally(() => {
        this.syncLoading = false;
      });
    },
  }
};
</script>
<style scoped>
.avatar-uploader i {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.head-containerTree {
  height: calc(100vh - 200px);
  overflow: auto;
}

.head-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.head-container::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}

.head-container::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.form {
  height: 600px;
}
</style>
